<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-03 17:02:51
 * @LastEditTime: 2023-07-19 17:18:13
 * @FilePath: \myblog\src\components\comment\CommentTextArea.vue
-->
<template>
  <el-card class="blog-textarea">
  <div class="blog-comment">
  <textarea ref="textarea" class="blog-comment--input" autofocus v-model="commentVal"></textarea>
  <el-button type="primary" @click="sumitComment">提交评论</el-button>
  </div>
  </el-card>
</template>

<script>
export default {
  components:{},
  data(){
    return {
      commentVal: ''
    }
  },
  props: {
    aid: {
      type: String
    }
  },
created(){},
mounted(){
  this.$EventBus.$on('focusTextarea', () =>{
    this.focusTextarea()
  })
},
watch:{},
computed:{
},
inject: ['getArticleById'],
methods:{
  focusTextarea() {
    this.$refs.textarea.focus();
  },
  async sumitComment() {
    if (this.commentVal.trim().length === 0)
    {
      this.$message.info({
        title: '请填写评论内容'
      })
      this.focusTextarea()
    }
    try{
      await this.$api({type:'postComment', data:{aid: this.aid, content: this.commentVal}})
      this.$notify({
          title: '成功',
          message: '评论成功',
          type: 'success'
        });
        // 更新数据
        this.getArticleById()
        this.commentVal = ''
    }
    catch(err)
    {
      this.$notify.error({
          title: '错误',
          message: '提交失败'
        });
    }
  }
},
}
</script>
<style lang="scss" scoped>
.blog-textarea {
  margin-bottom: 10px;
}
  .blog-comment {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    .blog-comment--input {
      width: 75%;
      max-width: 600px;
      height: 150px;
      resize: none;
      outline: none;
      margin-bottom: 20px;
    }
    
  }
</style>